<div class="row">
    <div class="col-sm-12 portfolio animated">
        <header class="text-center">
            <h1>Popular Universities</h1>            
        </header>

        <ul class="filter text-center">
            <li><a href="#" data-filter="*" class="active">All</a></li>
            <li><a href="#" data-filter=".England">England</a></li>
            <li><a href="#" data-filter=".Scotland">Scotland</a></li>
            <li><a href="#" data-filter=".Wales">Wales</a></li>
            <li><a href="#" data-filter=".Ireland">Northern Ireland</a></li>
        </ul>

        <ul class="items col-4 gap animated isotope">
            <li class="item thumb [[university.region.name]] isotope-item" ng-repeat="university in universities" post-repeat-directive>
                <figure>

                    <div class="icon-overlay icn-link" style="height: 180px; overflow: hidden;">
                        <a ng-href="[[ university.absolute_url ]]"><span class="icn-more"></span><img ng-src="[[university.primary_image.thumb]]" ng-alt="university.name"></a>
                    </div><!-- /.icon-overlay -->

                    <figcaption class="bordered no-top-border" style="height: 128px;">
                        <div class="info">
                            <h4 ng-bind="university.name"><a ng-href="[[ university.absolute_url ]]"></a></h4>
                            <p>
                                <span ng-bind="university.region.name"></span> |
                                Rank: <span ng-bind="university.rank"></span> |
                                Tuition: &pound;<span ng-bind="university.tuition"></span>
                            </p><!-- /.meta -->
                            <!--<p ng-bind="university.short_description"></p>-->
                        </div><!-- /.info -->
                    </figcaption>

                </figure>
            </li>
        </ul>

    </div>
</div>

